<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF导出测试</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', '微软雅黑', 'SimSun', '宋体', sans-serif;
            padding: 20px;
            line-height: 1.6;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .message {
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #3b82f6;
            background-color: #f3f4f6;
        }
        .message.assistant {
            border-left-color: #10b981;
            background-color: #ffffff;
            border: 1px solid #e5e7eb;
        }
        .message-header {
            font-weight: 600;
            margin-bottom: 10px;
        }
        .message-content {
            white-space: pre-wrap;
        }
        button {
            padding: 10px 20px;
            margin: 10px;
            border: none;
            border-radius: 5px;
            background: #3b82f6;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background: #2563eb;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>PDF导出测试</h1>
        <p>这个页面用于测试PDF导出功能的中文显示效果。</p>
        
        <button onclick="exportToPDF()">导出为PDF</button>
        <button onclick="exportToHTML()">导出为HTML</button>
        
        <div id="content">
            <div class="message">
                <div class="message-header">👤 用户 - 2024-01-15 10:30:00</div>
                <div class="message-content">你好，我想了解一下人工智能的发展历史。</div>
            </div>
            
            <div class="message assistant">
                <div class="message-header">🤖 AI助手 - 2024-01-15 10:30:15</div>
                <div class="message-content">人工智能的发展历史可以追溯到20世纪50年代。以下是主要的发展阶段：

1. 符号主义时期（1950s-1960s）
   - 图灵测试的提出
   - 专家系统的早期发展

2. 连接主义时期（1980s-1990s）
   - 神经网络的复兴
   - 反向传播算法的应用

3. 深度学习时代（2000s-现在）
   - 大数据和计算能力的提升
   - 深度学习技术的突破
   - 在图像识别、自然语言处理等领域的应用

人工智能技术正在快速发展，未来将在更多领域发挥重要作用。</div>
            </div>
            
            <div class="message">
                <div class="message-header">👤 用户 - 2024-01-15 10:31:00</div>
                <div class="message-content">谢谢你的详细解答！能再介绍一下机器学习的基本概念吗？</div>
            </div>
            
            <div class="message assistant">
                <div class="message-header">🤖 AI助手 - 2024-01-15 10:31:20</div>
                <div class="message-content">当然可以！机器学习是人工智能的一个重要分支，主要概念包括：

**基本定义**
机器学习是让计算机通过数据学习模式，而不需要明确编程的技术。

**主要类型**
1. 监督学习：使用标记数据进行训练
2. 无监督学习：从无标记数据中发现模式
3. 强化学习：通过与环境交互学习最优策略

**常见算法**
- 线性回归
- 决策树
- 支持向量机
- 神经网络
- 随机森林

**应用领域**
- 图像识别
- 自然语言处理
- 推荐系统
- 金融风控
- 医疗诊断

机器学习正在改变我们的生活方式和工作方式！</div>
            </div>
        </div>
    </div>

    <script type="module">
        // 模拟导出服务
        class TestExportService {
            async exportToPDF() {
                try {
                    const { default: html2canvas } = await import('https://cdn.skypack.dev/html2canvas@1.4.1');
                    const { jsPDF } = await import('https://cdn.skypack.dev/jspdf@2.5.1');
                    
                    const element = document.getElementById('content');
                    
                    const canvas = await html2canvas(element, {
                        scale: 2,
                        useCORS: true,
                        allowTaint: true,
                        backgroundColor: '#ffffff',
                        width: 800,
                        height: element.scrollHeight
                    });
                    
                    const imgData = canvas.toDataURL('image/png');
                    const pdf = new jsPDF('p', 'mm', 'a4');
                    
                    const imgWidth = 210;
                    const pageHeight = 295;
                    const imgHeight = (canvas.height * imgWidth) / canvas.width;
                    let heightLeft = imgHeight;
                    let position = 0;
                    
                    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                    heightLeft -= pageHeight;
                    
                    while (heightLeft >= 0) {
                        position = heightLeft - imgHeight;
                        pdf.addPage();
                        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                        heightLeft -= pageHeight;
                    }
                    
                    pdf.save('test-export.pdf');
                    alert('PDF导出成功！');
                } catch (error) {
                    console.error('PDF导出失败:', error);
                    alert('PDF导出失败: ' + error.message);
                }
            }
            
            exportToHTML() {
                const html = document.documentElement.outerHTML;
                const blob = new Blob([html], { type: 'text/html;charset=utf-8' });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = 'test-export.html';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
                alert('HTML导出成功！');
            }
        }
        
        const exportService = new TestExportService();
        
        window.exportToPDF = () => exportService.exportToPDF();
        window.exportToHTML = () => exportService.exportToHTML();
    </script>
</body>
</html>
